<template>
  <div class="row">
    <div class="col-6">
      <draggable
        :list="appList"
        :disabled="!enabled"
        class="list-group"
        ghost-class="ghost"
        :move="checkMove"
        :options="dragOptions"
        @start="dragging = true"
        @end="dragging = false"
      >
        <div
          class="list-group-item"
          v-for="element in appList"
          :key="element.name"
        >
          {{ element.name }}
        </div>
      </draggable>
    </div>

  </div>
</template>

<script>
  import draggable from "vuedraggable";
  export default {
    components: {
      draggable
    },
    data() {
      return {
        enabled: true,
        dragging: false,
        appList: [{
          "quick_entry": "1",
          "appId": 6,
          "name": "我的积分",
          "icon": "EZ-NFS-86de04e2-1f18-4e64-bab9-c162950a22e8.png",
          "id": 112,
          "order_num": 0,
          "appCode": "wdjf",
          "url": "/wechat/weath/my_point"
        }, {
        "quick_entry": "1",
          "appId": 5,
          "name": "新闻资讯",
          "icon": "EZ-NFS-081b73b1-7aaf-436e-bfe1-8768798417b0.png",
          "id": 106,
          "order_num": 1,
          "appCode": "xwzx",
          "url": "/wechat/news"
      }]

      };
    },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: true,
        ghostClass: "ghost"
      };
    }
  },
    methods: {
      checkMove: function(e) {
        window.console.log("Future index: " + e.draggedContext.futureIndex);
      }
    }
  };
</script>
<style scoped>
  .buttons {
    margin-top: 35px;
  }
  .ghost {
    opacity: 0.5;
    background: #c8ebfb;
  }
  .list-group-item{
    background: #ffce19;
    margin: 0 auto;
    width: 50px;
    padding: 20px;
    color: #fff;
    margin-top:10px;
  }
</style>
